<!DOCTYPE html>
<html lang="en">
<head>
    <#include "/WEB-INF/views/common/meta.html" />
    <title>设备监控</title>
    <#include "/WEB-INF/views/common/css.html"/>
    <link rel="stylesheet" type="text/css" href="/static/lib/mui/css/mui.indexedlist.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav bg-blue">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">选择设备</h1>
    <a id='done' class="mui-btn mui-btn-link mui-pull-right mui-btn-white mui-disabled" style="color:#fff;">完成</a>
</header>
<div class="mui-content">
    <div id='list' class="mui-indexed-list">
        <div class="mui-indexed-list-search mui-input-row mui-search">
            <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索设备">
        </div>
        <div class="mui-indexed-list-bar" style="display:none;">
            <a>一</a>
            <a>二</a>
            <a>三</a>
        </div>
        <div class="mui-indexed-list-alert"></div>
        <div class="mui-indexed-list-inner">
            <div class="mui-indexed-list-empty-alert">没有数据</div>
            <ul class="mui-table-view">
                <#list groupList as group>
                    <li data-group="A" class="mui-table-view-divider mui-indexed-list-group">${group.groupName}</li>
                    <#list group.deviceList as device>
                        <li data-value="1" data-tags="1" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" value="${device.deviceCode}" />${device.deviceName}(${device.deviceCode})</li>
                    </#list>
                </#list>
            </ul>
        </div>
    </div>
</div>
</body>
<#include "/WEB-INF/views/common/js.html"/>
<script type="text/javascript" src="/static/lib/mui/js/mui.indexedlist.js" ></script>
<script type="text/javascript">
    mui.init();
    mui.ready(function() {
        var header = document.querySelector('header.mui-bar');
        var list = document.getElementById('list');
        var done = document.getElementById('done');
        //calc hieght
        list.style.height = ($(window).height() - $("header").height()) + 'px';
        //create
        window.indexedList = new mui.IndexedList(list);
        //done event
        done.addEventListener('tap', function() {
            var checkboxArray = [].slice.call(list.querySelectorAll('input[type="checkbox"]'));
            var checkedValues = [];
            checkboxArray.forEach(function(box) {
                if (box.checked) {
                    checkedValues.push(box.value);
                }
            });
            if (checkedValues.length > 0) {
//                if (checkedValues.length > 1) {
//                    mui.alert('你选择了: ' + checkedValues + '。选择设备不能超过一个');
//                }else{
//                    window.location.href="/?deviceCodes=" + checkedValues;
//                }
                window.location.href="/?deviceCodes=" + checkedValues;
            } else {
                mui.alert('你没选择任何设备');
            }
        }, false);
        mui('.mui-indexed-list-inner').on('change', 'input', function() {
            var count = list.querySelectorAll('input[type="checkbox"]:checked').length;
            var value = count ? "完成(" + count + ")" : "完成";
            done.innerHTML = value;
            if (count) {
                if (done.classList.contains("mui-disabled")) {
                    done.classList.remove("mui-disabled");
                }
            } else {
                if (!done.classList.contains("mui-disabled")) {
                    done.classList.add("mui-disabled");
                }
            }
        });
    });
</script>
</html>